<template>
	<view class="Class_record">
		<card :query="query" :type="'evaluation'"></card>
		<view class="rate">
			<view class="row">
				<view class="title">
					满意度
				</view>
				<evaluation v-model="getQuery.satis" :max="5" @input="changeSatisfaction"></evaluation>
			</view>
			<view class="row">
				<view class="title">
					服务
				</view>
				<evaluation v-model="getQuery.serve" :max="5" @input="changeServe"></evaluation>
			</view>
			<view class="row">
				<view class="title">
					专业
				</view>
				<!-- :disabled="true" -->
				<evaluation v-model="getQuery.major" :max="5"  ></evaluation>
			</view>
		</view>
		<view class="textare_box">
			<u-input type="textarea" v-model="getQuery.word" :border="false" :height="290" :auto-height="false" :clearable="false"/>
			<view class="photo">
				<image :src="$IMG_URL('/static/user/upload.png')" mode="" class="upload" v-if="getQuery.eva_image_list.length < 9" @click="uploadCertImg"></image>
				<view v-for="(item,index) in getQuery.eva_image_list" :key="index" class="Item">
					<image :src="$IMG_URL('/static/user/close.png')" mode="" class="close" @click="close(item, index)"></image>
					<image :src="item" mode="" class="img"></image>
				</view>
			</view>
		</view>
		<view class="empty">
			
		</view>
		<view class="foot">
			<view class="btn" @click="getmycourseSubmit">
				提交
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import card from './components/class_card.vue'
	import Evaluation from './components/Evaluation.vue';
	import{
		mycourseEvaluate,
		mycourseSubmit
	} from '@/api/user.js'
	export default{
		components:{
			card,
			 Evaluation
		},
		data(){
			return{
				getQuery:{
					satis:5,
					serve:5,
					major:5,
					word:'',
					eva_image_list:[],
					anonymity:0
				},
				photo:[],
				query:{}
			}
		},
		onLoad(e){
			this.getmycourseEvaluate(e)
		},
		methods:{
			getmycourseSubmit(){
				mycourseSubmit(this.query).then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						if (res.code == 1) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								icon:false,
								back:true
							})
							uni.$emit('SHOPID')
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								icon:false
							})
						}
					}
				})
			},
			uploadCertImg(){
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: function(res) {
						res.tempFilePaths.forEach(i=>{
							that.$UPLOADIMAGE(i, 'evaluate').then(imgUrl => {
								console.log('imgUrl', imgUrl);
								that.getQuery.eva_image_list.push(imgUrl)
							})
						})	
					},
				});
			},
			getmycourseEvaluate(e){
				mycourseEvaluate(e).then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.query = res.data
					}
				})
			},
			changeSatisfaction(index){
				console.log('changeSatisfaction', index);
				this.getQuery.satis = index
			},
			changeServe(index){
				console.log('Serve', index);
				this.getQuery.serve = index
			},
			changeMajor(index){
				console.log('Major', index);
				this.getQuery.major = index
			},
			close(item, index){
				this.getQuery.eva_image_list.splice(index, 1)
			}
		}
	}
</script>

<style lang="scss" >
	.empty{
		width: 750rpx;
		height: 180rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166,179,194,0.30); 
	}
	.foot{
		width: 750rpx;
		height: 160rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166,179,194,0.30); 
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
		padding-top: 10rpx;
		.btn{
			width: 710rpx;
			height: 88rpx;
			background: #73F0EA;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	page{
		background: #e9e9e9;
	}
	.Class_record{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 24rpx;
		.rate{
			margin-top: 20rpx;
			width: 702rpx;
			height: 248rpx;
			background: #ffffff;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 32rpx;
			.row{
				display: flex;
				flex-direction: row;
				align-items: center;
				.title{
					width: 134rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
					letter-spacing: 0.62rpx;
				}
			}
		}
		.textare_box{
			margin-top: 20rpx;
			width: 702rpx;
			// height: 602rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 32rpx;
		}
		
		.photo{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
			width: 100%;
		}
		.upload{
			width: calc((100% - 24rpx) / 3);
			height: 204rpx;
			 margin-right: 12rpx; /* 右边距 */
			margin-bottom: 12rpx;
		}
		.upload:last-child {
		  margin-right: 0; /* 如果是最后一个元素，移除右边距 */
		}
		.Item:nth-child(3n) {
		  margin-right: 0; /* 每行的第三个元素没有右边距 */
		}
		.Item{
			 width: calc((100% - 24rpx) / 3); /* 每行三个元素，包括间距 */
			height: 204rpx;
			background: rgba(0,0,0,0.00);
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;
			margin-right: 12rpx; /* 右边距 */
			margin-bottom: 12rpx;
			.close{
				position: absolute;
				right: 0;
				top: 0;
				width: 52rpx;
				height: 52rpx;
			}
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>